<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>086-m禁止长按操作</title>

    <style>
      p {
        pointer-events: none;
        /* 微信浏览器还需附加该属性才有效 */
        user-select: none;
        /* 禁止长按选择文字 */
        -webkit-touch-callout: none;
      }

      input,
      textarea {
        user-select: auto;
      }
    </style>
  </head>

  <body>
    <p>
      有时不想用户长按元素呼出菜单进行点链接、打电话、发邮件、保存图片或扫描二维码等操作，声明touch-callout:none禁止用户长按操作。
    </p>
    <p>有时不想用户复制粘贴盗文案，声明user-select:none禁止用户长按操作和选择复制。</p>

    <p>但声明user-select:none会让input和textarea无法输入文本，可对其声明user-select:auto排除在外。</p>
    <input type="text" placeholder="输入框" />
    <textarea cols="30" rows="10" placeholder="文字域"></textarea>
  </body>
</html>
